<template>
  <div class="list-wrapper">
    <common-back :content="title"></common-back>
    <common-scroll class="scroll"
                   ref="scroll"
                   v-if="list.length"
                   :listenScroll="listenScroll"
                   @pullingUp="handlePullUp"
                   :data="list">
      <div class="scroll-content">
        <ul>
          <li class="item"
              border-bottom-1px
              @click="handleDetail(item.id)"
              v-for="item of list"
              :key="item.id">{{item.meeting_name}}</li>
        </ul>
        <load-more v-show="loadMore"
                   :title="loadMoreTitle"></load-more>
      </div>
    </common-scroll>
    <div class="empty"
         v-show="!list.length">空空如也</div>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonScroll from 'common/scroll/scroll'
import LoadMore from 'common/loadMore/loadmore'
export default {
  name: 'mettingList',
  components: {
    CommonBack,
    CommonScroll,
    LoadMore
  },
  created () {
    this.getList()
    this.listenScroll = true
  },
  data () {
    return {
      title: '会议列表',
      list: [],
      page: 1,
      loadMore: false, // 加载更多
      total: 0, // 推荐总条数
      loadMoreTitle: '加载中...'
    }
  },
  methods: {
    handleDetail (id) {
      this.$router.push({
        path: `/me/meeting/detail/${id}`
      })
    },
    getList () {
      const page = this.page
      this.$api.meeting.list({ page })
        .then(this.getListSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getListSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = this.list.concat(data.list)
        this.total = data.total
        this.loadMore = false
      }
    },
    // 上拉加载更多
    handlePullUp () {
      this.loadMore = true
      const flag = this.judge()
      if (flag) {
        this.page += 1
        this.getList()
      } else {
        this.loadMoreTitle = '没有更多'
      }
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullUp()
    },
    // 判断总条数是否大于列表长度
    judge () {
      const total = this.total
      const length = this.list.length
      return total > length
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.list-wrapper
  initPosition()
  overflow-y scroll
  background-color $common_bgc
  z-index 20

  .scroll
    top 98px
    bottom 10px
    background-color $common_bgc

    ul
      width 100%

      .item
        width 100%
        height 110px
        text-indent 52px
        font-size 32px
        line-height 110px
        font-weight 500
        color $order_content

.empty
  font-size $address_name
  font-weight 400
  color $original_price
  margin-top 177px
  width 100%
  text-align center
</style>
